<template>
  <div class="app-container calendar-list-container">
    <dev class="filter-container" style="margin-bottom: 10px;padding-bottom: 200px;">
      <span>{{ textMap[dialogStatus] }}</span>
    </dev>
    <!-- 建筑信息填报页 -->
    <dev v-if="buildDialogFormVisible" :visible.sync="buildDialogFormVisible">
      <el-form ref="buildDataForm" :rules="buildRules" :model="temp" label-position="center" label-width="120px" style="width: 450px; margin-left: 50px;">
        <el-form-item label="门牌号" prop="housenumber">
          <el-input v-model="temp.buildReportInfo.housenumber"/>
        </el-form-item>
        <el-form-item label="电话" prop="telephone">
          <el-input v-model="temp.buildReportInfo.telephone"/>
        </el-form-item>
        <el-form-item label="建造时间" prop="buildingtime">
          <!--<el-input v-model="temp.buildReportInfo.buildingtime"/>-->
          <el-date-picker
            v-model="temp.buildReportInfo.buildingtime"
            class="select-width-100"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="地下（层）数" prop="undergroudfloors">
          <el-input v-model.number="temp.buildReportInfo.undergroudfloors" type="number"/>
        </el-form-item>
        <el-form-item label="建筑物占地面积（m2）" prop="undergroudarea">
          <el-input v-model.number="temp.buildReportInfo.undergroudarea" type="number"/>
        </el-form-item>
        <el-form-item label="标准层面积（m2）" prop="undergroudstandarea">
          <el-input v-model.number="temp.buildReportInfo.undergroudstandarea" type="number"/>
        </el-form-item>
        <el-form-item label="地下层面积（m2）" prop="undergroudfloorarea">
          <el-input v-model.number="temp.buildReportInfo.undergroudfloorarea" type="number"/>
        </el-form-item>
        <el-form-item label="地上（层）" prop="overgroudfloors">
          <el-input v-model.number="temp.buildReportInfo.overgroudfloors" type="number"/>
        </el-form-item>
        <el-form-item label="总建筑面积（m2）" prop="overgroudarea">
          <el-input v-model.number="temp.buildReportInfo.overgroudarea" type="number"/>
        </el-form-item>
        <el-form-item label="建筑高度（m）" prop="buildheight">
          <el-input v-model.number="temp.buildReportInfo.buildheight" type="number"/>
        </el-form-item>
        <el-form-item label="建筑物占地面积（m2）" prop="ocupationarea">
          <el-input v-model.number="temp.buildReportInfo.ocupationarea" type="number"/>
        </el-form-item>
        <el-form-item label="标准层面积（m2）" prop="overgroudstandarea">
          <el-input v-model.number="temp.buildReportInfo.overgroudstandarea" type="number"/>
        </el-form-item>
        <el-form-item label="地上层面积（m2）" prop="overgroundfloorarea">
          <el-input v-model.number="temp.buildReportInfo.overgroundfloorarea" type="number"/>
        </el-form-item>
        <el-form-item label="消防施工单位" prop="developmentunit">
          <el-input v-model="temp.buildReportInfo.developmentunit"/>
        </el-form-item>
        <el-form-item label="建筑结构" prop="structure">
          <el-input v-model="temp.buildReportInfo.structure"/>
        </el-form-item>
        <el-form-item label="建筑物内同一时间可容纳最大人数" prop="capacity">
          <el-input v-model.number="temp.buildReportInfo.capacity" type="number"/>
        </el-form-item>
        <el-form-item label="主要储存物" prop="reservemateria">
          <el-input v-model.number="temp.buildReportInfo.reservemateria" type="number"/>
        </el-form-item>
        <el-form-item label="主要储存物数量（T）" prop="reservematerianum">
          <el-input v-model.number="temp.buildReportInfo.reservematerianum" type="number"/>
        </el-form-item>
        <el-form-item label="火灾危险性" prop="dangerous">
          <el-input v-model.number="temp.buildReportInfo.dangerous" type="number"/>
        </el-form-item>
        <el-form-item label="消防电梯数量" prop="fireliftnum">
          <el-input v-model.number="temp.buildReportInfo.fireliftnum" type="number"/>
        </el-form-item>
        <el-form-item label="消防电梯分别所在位置" prop="firelift">
          <el-input v-model.number="temp.buildReportInfo.firelift" type="number"/>
        </el-form-item>
        <el-form-item label="耐火等级" prop="firelevel">
          <el-input v-model="temp.buildReportInfo.firelevel"/>
        </el-form-item>
        <el-form-item label="防火分区（个）" prop="fireareanum">
          <el-input v-model.number="temp.buildReportInfo.fireareanum" type="number"/>
        </el-form-item>
        <el-form-item label="防火卷帘数量（扇）" prop="cutainnum">
          <el-input v-model.number="temp.buildReportInfo.cutainnum" type="number"/>
        </el-form-item>
        <el-form-item label="防火门类型" prop="firegatetype">
          <el-input v-model.number="temp.buildReportInfo.firegatetype" type="number"/>
        </el-form-item>
        <el-form-item label="防火门数量（扇）" prop="firegatenum">
          <el-input v-model.number="temp.buildReportInfo.firegatenum" type="number"/>
        </el-form-item>
        <el-form-item label="是否有消防设施系统" prop="isfireasset">
          <el-input v-model.number="temp.buildReportInfo.isfireasset" type="number"/>
        </el-form-item>
        <el-form-item label="消防设施平面图" prop="planmap">
          <el-input v-model="temp.buildReportInfo.planmap"/>
        </el-form-item>
      </el-form>
    </dev>

    <!-- 消防单位信息填报页 -->
    <dev v-if="proprietorDialogFormVisible" :visible.sync="proprietorDialogFormVisible">
      <el-form ref="proprietorDataForm" :rules="proprietorRules" :model="temp" label-position="left" label-width="120px" style="width: 450px; margin-left:50px;">
        <el-form-item label="经济所有制" prop="ownership">
          <el-input v-model="temp.proprietorReportInfo.ownership"/>
        </el-form-item>
        <el-form-item label="法人联系手机" prop="telnum">
          <el-input v-model="temp.proprietorReportInfo.telnum"/>
        </el-form-item>
        <el-form-item label="邮编" prop="postcode">
          <el-input v-model="temp.proprietorReportInfo.postcode"/>
        </el-form-item>
        <el-form-item label="安全管理员" prop="fireadmin">
          <el-input v-model="temp.proprietorReportInfo.fireadmin"/>
        </el-form-item>
        <el-form-item label="安全管理员手机" prop="fireadminphone">
          <el-input v-model="temp.proprietorReportInfo.fireadminphone"/>
        </el-form-item>
        <el-form-item label="安全管理员电话" prop="fireadmintel">
          <el-input v-model="temp.proprietorReportInfo.fireadmintel"/>
        </el-form-item>
        <el-form-item label="所属地区派出所" prop="owernpolice">
          <el-input v-model="temp.proprietorReportInfo.owernpolice"/>
        </el-form-item>
        <el-form-item label="固定资产额(万元)" prop="fixedassets">
          <el-input v-model="temp.proprietorReportInfo.fixedassets"/>
        </el-form-item>
        <el-form-item label="职工人数(人)" prop="workernum">
          <el-input v-model="temp.proprietorReportInfo.workernum"/>
        </el-form-item>
        <el-form-item label="燃气类型" prop="gastype">
          <el-input v-model="temp.proprietorReportInfo.gastype"/>
        </el-form-item>
        <el-form-item label="重点部位数" prop="keyareanum">
          <el-input v-model.number="temp.proprietorReportInfo.keyareanum" type="number"/>
        </el-form-item>
        <el-form-item label="重点工种人数" prop="keyworker">
          <el-input v-model.number="temp.proprietorReportInfo.keyworker" type="number"/>
        </el-form-item>
        <el-form-item label="营业时最大人数(人)" prop="dailyworkernum">
          <el-input v-model="temp.proprietorReportInfo.dailyworkernum"/>
        </el-form-item>
        <!--<el-form-item label="监管单位" prop="supervisorid">-->
        <!--<el-select v-model="temp.proprietorReportInfo.supervisorid" class="filter-item select-width-100" placeholder="请选择">-->
        <!--<el-option v-for="item in supervisorOptions" :key="item.value" :label="item.label" :value="item.value"/>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item label="专职相仿队员人数" prop="assistantnum">
          <el-input v-model.number="temp.proprietorReportInfo.assistantnum" type="number"/>
        </el-form-item>
        <el-form-item label="义务消防人员人数" prop="volunteernum">
          <el-input v-model.number="temp.proprietorReportInfo.volunteernum" type="number"/>
        </el-form-item>
        <el-form-item label="工艺情况" prop="technological">
          <el-input v-model="temp.proprietorReportInfo.technological"/>
        </el-form-item>
        <el-form-item label="危险品使用情况" prop="dangerous">
          <el-input v-model="temp.proprietorReportInfo.dangerous"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="temp.proprietorReportInfo.remark"/>
        </el-form-item>
      </el-form>
    </dev>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="proprietorDialogFormVisible" @click="handleBuildReport">{{ $t('table.previous') }}</el-button>
      <el-button v-if="proprietorDialogFormVisible" type="primary" @click="updateData">{{ $t('table.confirm') }}</el-button>
      <el-button v-if="buildDialogFormVisible" type="primary" @click="handleProprietor">{{ $t('table.next') }}</el-button>
      <el-button @click="closeTagView(this)">{{ $t('table.cancel') }}</el-button>
    </div>
  </div>
</template>

<script>
import { updateReportInfoDetail, getReportInfoDetail } from '@/api/fire/site/reportInfo'
import { selectLabelValue } from '@/api/fire/supervisor/base'
import { closeTagView } from '@/utils/tagViewUtils'
import waves from '@/directive/waves'// 水波纹指令
export default {
  name: 'ReportInformation',
  siteid: undefined,
  directives: {
    waves
  },
  data() {
    return {
      temp: {
        siteid: undefined,
        buildReportInfo: {
          zoneid: null,
          housenumber: null,
          buildingid: null,
          telephone: null,
          buildingtime: null,
          undergroudfloors: null,
          undergroudarea: null,
          undergroudstandarea: null,
          undergroudfloorarea: null,
          overgroudfloors: null,
          overgroudarea: null,
          buildheight: null,
          ocupationarea: null,
          overgroudstandarea: null,
          overgroundfloorarea: null,
          developmentunit: null,
          structure: null,
          capacity: null,
          reservemateria: null,
          reservematerianum: null,
          dangerous: null,
          fireliftnum: null,
          firelift: null,
          firelevel: null,
          fireareanum: null,
          cutainnum: null,
          firegatetype: null,
          firegatenum: null,
          isfireasset: null,
          planmap: null
        },
        proprietorReportInfo: {
          proprietor: null,
          ownership: null,
          telnum: null,
          postcode: null,
          fireadmin: null,
          fireadminphone: null,
          fireadmintel: null,
          owernpolice: null,
          fixedassets: null,
          workernum: null,
          gastype: null,
          keyareanum: null,
          keyworker: null,
          dailyworkernum: null,
          // supervisorid: null,
          // supervisorname: null,
          assistantnum: null,
          volunteernum: null,
          technological: null,
          dangerous: null,
          remark: null
        }
      },
      treeSelectedOptions: [],
      buildDialogFormVisible: false,
      proprietorDialogFormVisible: false,
      dialogStatus: null,
      textMap: {
        buildingInfoReport: '建筑物登记',
        proprietorInfoReport: '消防单位登记'
      },
      buildRules: {
        // undergroudfloors: [{ type: 'number', message: '请输入正确楼层数', trigger: ['blur', 'change'] }],
        // housenumber: [{ required: false, message: '请输入站点名称', trigger: 'blur' }],
        // buildingtime: [{ type: 'date', required: false, message: '请选择日期', trigger: 'change' }]
      },
      proprietorRules: {
        // sitename: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
      },
      downloadLoading: false,
      buttonInit: [
        {
          title: '查询',
          permission: 'list'
        },
        {
          title: '添加',
          permission: 'add'
        },
        {
          title: '更新',
          permission: 'update'
        },
        {
          title: '删除',
          permission: 'delete'
        },
        {
          title: '导出',
          permission: 'export'
        },
        {
          title: '导入',
          permission: 'import'
        }
      ],
      supervisorOptions: []
    }
  },
  created() {
    this.initFromValidate('buildDataForm')
    // this.initFromValidate('proprietorDataForm')
    this.resetTemp()
    this.siteid = this.$store.state.site.siteid
    // 防止页面单独刷新后无siteid
    if (this.siteid === undefined || this.siteid === '') {
      this.closeThisTag()
    }
    this.handleBuildReport()
    this.querySupervisorOptions()
    this.getDetail()
  },
  methods: {
    isActive(route) {
      return route.path === this.$route.path
    },
    initFromValidate(fromStr) {
      this.$nextTick(() => {
        this.$refs[fromStr].clearValidate()
      })
    },
    getDetail() {
      getReportInfoDetail(this.siteid).then((response) => {
        const data = response.data
        if (data.status === '0') {
          this.temp = Object.assign({}, data.context)
        } else {
          this.$notify({
            title: '失败',
            message: data.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    resetTemp() {
      this.temp = {
        buildReportInfo: {
          zoneid: null,
          housenumber: null,
          buildingid: null,
          telephone: null,
          buildingtime: null,
          undergroudfloors: null,
          undergroudarea: null,
          undergroudstandarea: null,
          undergroudfloorarea: null,
          overgroudfloors: null,
          overgroudarea: null,
          buildheight: null,
          ocupationarea: null,
          overgroudstandarea: null,
          overgroundfloorarea: null,
          developmentunit: null,
          structure: null,
          capacity: null,
          reservemateria: null,
          reservematerianum: null,
          dangerous: null,
          fireliftnum: null,
          firelift: null,
          firelevel: null,
          fireareanum: null,
          cutainnum: null,
          firegatetype: null,
          firegatenum: null,
          isfireasset: null,
          planmap: null
        },
        proprietorReportInfo: {
          proprietor: null,
          ownership: null,
          telnum: null,
          postcode: null,
          fireadmin: null,
          fireadminphone: null,
          fireadmintel: null,
          owernpolice: null,
          fixedassets: null,
          workernum: null,
          gastype: null,
          keyareanum: null,
          keyworker: null,
          dailyworkernum: null,
          // supervisorid: null,
          // supervisorname: null,
          assistantnum: null,
          volunteernum: null,
          technological: null,
          dangerous: null,
          remark: null
        }
      }
      this.treeSelectedOptions.length = 0
    },
    handleBuildReport() {
      this.dialogStatus = 'buildingInfoReport'
      this.buildDialogFormVisible = true
      this.proprietorDialogFormVisible = false
      // this.$refs['buildDataForm'].clearValidate()
    },
    handleProprietor() {
      // 显示第二页，判断第一页表单是否满足要求
      this.$refs['buildDataForm'].validate((valid) => {
        if (valid) {
          this.dialogStatus = 'proprietorInfoReport'
          this.proprietorDialogFormVisible = true
          this.buildDialogFormVisible = false
          this.$refs['proprietorDataForm'].clearValidate()
        }
      })
    },
    updateData() {
      // 准备数据
      this.temp.buildReportInfo.buildingtime = this.crtTimeFtt(this.temp.buildReportInfo.buildingtime, '')
      // this.temp.proprietorReportInfo.supervisorname = this.getSupervisorName()
      this.temp.siteid = this.siteid
      console.log(this.siteid)
      this.$refs['proprietorDataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateReportInfoDetail(tempData).then((response) => {
            const data = response.data
            if (data.status === '0') {
              this.buildDialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '填报信息提交成功',
                type: 'success',
                duration: 2000
              })
              closeTagView(this)
            } else {
              this.$notify({
                title: '失败',
                message: data.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    querySupervisorOptions() {
      selectLabelValue().then(response => {
        if (response.data.status === '0') {
          this.supervisorOptions = response.data.context
        }
      })
    },
    getSupervisorName() {
      for (const optionObj in this.supervisorOptions) {
        if (this.supervisorOptions[optionObj].value === this.temp.proprietorReportInfo.supervisorid) {
          return this.supervisorOptions[optionObj].label
        }
      }
    },
    crtTimeFtt(val, row) {
      if (val != null) {
        const date = new Date(val)
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      }
    }
  }
}
</script>
<style>
  .select-width-100{
    width: 100%;
  }
</style>
